<template>
    <div>
        <div class="operarea">
            <div class="seach">
                <el-input v-model="seachForm.bh" :placeholder="$t('encoding')" clearable size="mini" @keyup.enter.native="seachData"></el-input>
                <el-input v-model="seachForm.name" :placeholder="$t('name')" clearable size="mini" @keyup.enter.native="seachData"></el-input>
                <el-input v-model="seachForm.color" :placeholder="$t('color')" clearable size="mini" @keyup.enter.native="seachData"></el-input>
                <el-input v-model="seachForm.spec" placeholder="尺码" clearable size="mini" @keyup.enter.native="seachData"></el-input>
                <el-button size="mini" icon="el-icon-search" @click="seachData"></el-button>
            </div>
        </div>
        <el-card class="cardBox">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>首页</el-breadcrumb-item>
                <el-breadcrumb-item>bom表</el-breadcrumb-item>
            </el-breadcrumb>
            <el-table style="width: 100%" ref="bomeTable" :data="bomTab" stripe v-adaptive="{bottomOffset: 85}" height="100">
                <el-table-column prop="bh" min-width="130" :label="$t('encoding')">
                </el-table-column>
                <el-table-column prop="name" min-width="120" :label="$t('name')">
                </el-table-column>
                <el-table-column prop="color" min-width="120" :label="$t('size')">
                </el-table-column>
                <el-table-column prop="color" min-width="120" :label="$t('color')">
                </el-table-column>
                <el-table-column prop="reviewStatus" min-width="120" label="审核状态">
                </el-table-column>
                <el-table-column prop="address" min-width="135" :label="$t('operation')" fixed="right">
                    <template v-slot="scope">
                        <el-button @click.stop="getRecommend(scope.row)" size="mini">查看</el-button>
                        <el-button @click.stop="editMat(scope.row)" size="mini">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                small
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="seachForm.pageNum"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="seachForm.pageSize"
                layout="sizes, prev, pager, next"
                :total="total">
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
import {
    getCodeRuleAll
} from '@/libs/reqlist.js'
export default {
    data() {
        return {
            seachForm: {
                bh: '',
                name: '',
                type: 'clothe',
                brand: '',
                uuid: '',
                delete_status: '',
                pageNum: 1,
                pageSize: 10
            },
            bomTab: [],
            total: 0
        }
    },
    methods: {
        seachData() {
            getCodeRuleAll(JSON.stringify(this.seachForm)).then(res => {
                if (res.data.code == 0) {
                    this.total = res.data.data.hits
                    res.data.data.data.forEach(item => {
                        switch (item.reviewStatus) {
                            case 0:
                                item.reviewStatus = '未审核'
                                break
                            case 1:
                                item.reviewStatus = '已审核'
                                break
                        }
                    })
                    this.bomTab = res.data.data.data
                }
            })
        },
        handleSizeChange(newSize) {
            this.seachForm.pageSize = newSize
            this.seachData()
        },
        handleCurrentChange(newNum) {
            this.seachForm.pageNum = newNum
            this.seachData()
        },
        getRecommend(item) {
            sessionStorage.setItem('matCodeType', '0')
            sessionStorage.setItem('matCodeItem', JSON.stringify(item))
            this.$router.push('/menu/sec/bom')
        },
        editMat(item) {
            sessionStorage.setItem('matCodeType', '1')
            sessionStorage.setItem('matCodeItem', JSON.stringify(item))
            this.$router.push('/menu/sec/bom')
        }
    },
    mounted() {
        this.seachData()
    }
}
</script>

<style lang="less" scoped>
@import './bom.less';
</style>
